<template>
  <div class="outer-user-item">
    <!--    <div class="all-row outer-user-item-title">-->
    <!--      <span>人员1</span>-->
    <!--      <div class="right">-->
    <!--        <el-icon color="#dc1a33" size="12px">-->
    <!--          <Minus/>-->
    <!--        </el-icon>-->
    <!--      </div>-->
    <!--    </div>-->
    <el-form ref="formRef" :model="form" prefix="：" :rules="rules" inline label-width="120">
      <el-form-item label="姓名" prop="name">
        <el-input v-model.trim="form.name" placeholder="请输入" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择" style="width: 200px;">
          <el-option label="男" value="男"/>
          <el-option label="女" value="女"/>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="telphone">
        <el-input v-model.trim="form.telphone" placeholder="请输入" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="form.idCard" placeholder="请输入" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="特殊作业资质" prop="specialJobType">
        <el-select v-model="form.specialJobType" placeholder="请选择" style="width: 200px;">
          <el-option v-for="item in options.specialOperationEnum" :label="item.label.replace('证', '') + '证'" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="附件" prop="documentInfi">
        <HyUpload v-model:file-list="form.documentInfi" @validateField="goClear"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import HyUpload from "./HyUpload";
const rules =  {
  name: [
    {required: true, message: '请输入', trigger: ['change']},
  ],
  sex: [
    {required: true, message: '请选择', trigger: ['change']},
  ],
  telphone: [
    {required: true, message: '请输入', trigger: ['change']},
    {pattern: /^1[3456789]\d{9}$/, message: "请输入合法手机号", trigger: ['change']}
  ],
  idCard: [
    {required: true, message: '请输入', trigger: ['change']},
    {
      pattern: /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/,
      message: "请输入合法身份证号",
      trigger: ['change']
    }
  ],
  specialJobType: [
    {required: true, message: '请选择', trigger: ['change']},
  ],
  documentInfi: [
    {required: true, message: '请上传', trigger: ['change']},
  ],
}
const rules1 =  {
  name: [
    {required: true, message: '请输入', trigger: ['change']},
  ],
  sex: [
    {required: true, message: '请选择', trigger: ['change']},
  ],
  telphone: [
    {required: true, message: '请输入', trigger: ['change']},
    {pattern: /^1[3456789]\d{9}$/, message: "请输入合法手机号", trigger: ['change']}
  ],
  idCard: [
    {required: true, message: '请输入', trigger: ['change']},
    {
      pattern: /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/,
      message: "请输入合法身份证号",
      trigger: ['change']
    }
  ],
  specialJobType: [
    {required: true, message: '请选择', trigger: ['change']},
  ],
}

export default {
  name: "OuterUser",
  components: {HyUpload},
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Object,
      default: () => ({
        specialOperationEnum: []
      })
    },
    notRequireFile: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      rules: this.notRequireFile ? rules1 : rules
    }
  },
  // created() {
  //   if(this.notRequireFile) {
  //     let copyRules = JSON.parse(JSON.stringify(rules))
  //     delete copyRules.documentInfi
  //     this.rules = copyRules
  //   } else {
  //     this.rules = rules
  //   }
  // },
  methods: {
    valid() {
      return new Promise((resolve, reject) => {
        this.$refs.formRef.validate(valid => {
          if (valid) {
            return resolve()
          } else {
            return reject()
          }
        })
      })
    },
    goClear(){
      this.$refs.formRef.clearValidate(['documentInfi'])
    }
  }
}
</script>

<style lang="less" scoped>
.outer-user-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 10px 0;
  padding: 10px;
  //border: 1px solid #1caad5;
  border-radius: 4px;

  .outer-user-item-title {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #dc1a33;
      cursor: pointer;
    }
  }

  .all-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .half-row {
    width: 50%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    vertical-align: baseline;
  }

  .label {
    width: 100px;
    text-align: right;
  }

  .content {
    flex: 1;

    & > * {
      width: 100%;
    }
  }
}
</style>
